import React from 'react';
import { Link } from 'react-router-dom';
import './Left.css'
import { Menu } from 'antd';
import { 
  HomeOutlined, 
  MenuOutlined,
  PartitionOutlined,
  SecurityScanOutlined,
  UserOutlined
} from '@ant-design/icons';

const {SubMenu} = Menu;
//左侧导航的组件
const Left = () => {
  return (
    <div>
        <div className="left_nav">
        <Link to="/" className="left_nav_header">
        </Link> 
        <Menu
          mode="inline"
          theme="dark"
          width="150px"
        >
          <SubMenu key="sub_menu1" icon={<HomeOutlined />} title="首页">
              <Menu.Item key="menu_item1" icon={<PartitionOutlined />}>
                <Link to="/lishi">历史展示</Link>
              </Menu.Item>
              <Menu.Item key="menu_item2" icon={<SecurityScanOutlined />}>
                <Link to="/xiai">喜爱度排行榜</Link>
              </Menu.Item>
          </SubMenu>
          <SubMenu key="sub_menu2" icon={<MenuOutlined />} title="科普">
              <Menu.Item key="menu_item3" icon={<PartitionOutlined />}>
                <Link to="/wenzhang">文章展示</Link>
              </Menu.Item>
              <Menu.Item key="menu_item4" icon={<SecurityScanOutlined />}>
                <Link to="/dianzan">点赞量</Link>
              </Menu.Item>
          </SubMenu>
          <SubMenu key="sub_menu3" icon={<MenuOutlined />} title="工艺">
              {/* <Menu.Item key="menu_item5" icon={<PartitionOutlined />}>
                <Link to="/category">用户管理</Link>
              </Menu.Item> */}
              <Menu.Item key="menu_item6" icon={<SecurityScanOutlined />}>
                <Link to="/sheji">设计管理</Link>
              </Menu.Item>
          </SubMenu>
          <Menu.Item key="menu_item7" icon={<UserOutlined />}>
            <Link to="/user">用户管理</Link>
          </Menu.Item>
        </Menu>
      </div>
    </div>
  )
}

export default Left